<template>
    <el-cascader v-model="select"
                 :clearable="true"
                 separator=" "
                 :options="options"/>
</template>

<script>
    import {area} from "./area";

    export default {
        name: 'AreaCascader',
        data() {
            return {
                options: area(),
                // select: [],
            }
        },
        props: {
            province: {
                type: String,
                default: '',
            },
            city: {
                type: String,
                default: '',
            },
            district: {
                type: String,
                default: '',
            }
        },
        computed: {
            select: {
                get() {
                    return [this.province, this.city, this.district];
                },
                set(val) {
                    if (val.length > 0) {
                        this.$emit('update:province', val[0]);
                        this.$emit('update:city', val[1]);
                        this.$emit('update:district', val[2]);
                    } else {
                        this.$emit('update:province', '');
                        this.$emit('update:city', '');
                        this.$emit('update:district', '');
                    }
                }
            }
        }
    }
</script>
